<!--
 * @Descripttion: 文章列表
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-05 09:25:29
-->
<template>
  <div class="lb-website-edit-news">
    <top-nav :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="120px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="subForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="subForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 200 * 200</lb-tool-tips>
        </el-form-item>
        <el-form-item label="定时发布" prop="is_release">
          <el-radio-group :disabled="subForm.id" v-model="subForm.is_release">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="定时发布时间"
          prop="release_time"
          v-show="subForm.is_release === 1"
        >
          <el-date-picker
            :picker-options="pickerOptions"
            :disabled="subForm.have_release === 1"
            v-model="subForm.release_time"
            type="datetime"
            value-format="timestamp"
            placeholder="请选择定时发布时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <lb-ueditor v-model="subForm.content" :destroy="true"></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('subForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateTime = (rule, value, callback) => {
      if (this.subForm.is_release === 1 && !this.subForm.release_time) {
        callback(new Error(`请选择定时发布时间`))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        disabledDate (time) {
          const one = 1 * 24 * 3600 * 1000
          return time.getTime() < Date.now() - one
        }
      },
      subForm: {
        title: '',
        cover: [],
        view_count: '',
        is_release: 0,
        release_time: '',
        have_release: 0,
        top: '',
        content: ''
      },
      subFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入标题',
          trigger: 'blur'
        },
        cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        is_release: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'blur'
        },
        release_time: {
          required: true,
          validator: validateTime,
          trigger: 'blur'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        },
        content: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        }
      },
      wid: '',
      id: '',
      navTitle: ''
    }
  },
  created () {
    let { wid, id } = this.$route.query
    this.subForm.modular_id = wid
    this.subForm.id = id
    if (id) {
      this.getFormInfo()
    }
  },
  methods: {
    getFormInfo () {
      let { id } = this.subForm
      this.$api
        .getWebsitContentInfo({ modular_id: this.subForm.modular_id, id })
        .then(res => {
          if (res.code === 200) {
            res.data.release_time = res.data.release_time * 1000
            for (let key in this.subForm) {
              this.subForm[key] = res.data[key]
            }
            this.subForm.cover = [{ url: res.data.cover }]
          }
        })
    },
    /**
     * @method 提交表单信息
     */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          subForm.cover = subForm.cover.map(item => {
            return item.url
          })
          subForm.release_time = subForm.release_time ? subForm.release_time / 1000 : ''
          delete subForm.radar_group
          delete subForm.radar_time
          if (this.subForm.id) {
            this.$api.editWebsiteContentInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addWebsiteContentInfo(subForm).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },

    /**
     * @method 获取封面图
     */
    getCover (img) {
      this.subForm.cover = img
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.go(-1)
    }
  },
  watch: {
    'subForm.content' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs['subForm'].clearValidate('content')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-website-edit-news {
  width: 100%;
  .el-input,
  .el-input-number,
  .el-select {
    width: 300px;
  }
}
</style>
